import React,{PureComponent} from 'react'
import {View,StyleSheet,TouchableOpacity,Text,Dimensions,Image,Button,Platform} from 'react-native'
import {SpaceView} from '../Separator'


const {width} = Dimensions.get('window')


type Props = {
    detail:Object,
}


export default class MineCourseDetailHeaderView extends PureComponent<Props>{
    render(){
        let detail = this.props.detail
        let start_time = detail.start_date.substr(5, 5).replace('-', '月') + '日'
        let end_time = detail.end_date.substr(5, 5).replace('-', '月') + '日'
        return (
            <View style={styles.container}>
                <View style={[{width:width-30,marginTop:9, marginLeft:15, position:'absolute'},styles.image_view]}>
                    <View style={[{width:width-16,height:170,marginTop:-5, marginLeft:-8},styles.image_view]}/>
                </View>
                {this.renderImagePlhoner()}
                <Text style={styles.title_text}>{detail.title}</Text>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Text style={styles.time_text}>时间</Text>
                    <Text style={styles.time_text_}>{start_time + '到' + end_time}</Text>
                </View>
                <View style={{marginTop:15,flexDirection:'row'}}>
                    <Text style={styles.time_text}>老师</Text>
                    <View style={{marginLeft:10}}>
                        <View style={{flexDirection:'row'}}>
                            <Text style={styles.teach_name}>主讲老师：</Text>
                            <Text style={styles.teach_name}>{detail.master_teacher}</Text>
                        </View>
                        <View style={{flexDirection:'row',marginTop:12,marginBottom:20}}>
                            <Text style={styles.teach_name}>辅导老师：</Text>
                            <Text style={styles.teach_name}>{detail.tutor_teacher}</Text>
                        </View>
                    </View>
                </View>
                <SpaceView/>
                <View style={{justifyContent:'center',flex:1,backgroundColor:'white',paddingTop:20,paddingBottom:20}}>
                    <Text style={{fontSize:16,color:'black',fontWeight:'600',marginLeft:12}}>课程列表</Text>
                </View>
            </View>
        )
    }
    renderImagePlhoner(){
        let detail = this.props.detail
        if (detail.image){
            return  <Image style={styles.header_image} source={{uri:detail.image}}/>

        } else {
            return  <Image style={styles.header_image} source={require('../../../res/img/course_phoder.jpg')}/>
        }
    }
}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'white',
    },
    image_view:{
        backgroundColor:'white',
        borderRadius:6,
        shadowColor:'#7D7D7D',
        shadowOffset:{h:2,w:2},
        shadowRadius:1,
        shadowOpacity:0.4,
        height:170,
    },
    header_image:{
       width: width,
        height:170,
        borderRadius:3,
        position:'relative'
    },
    title_text:{
      fontSize:20,
        marginLeft:12,
        marginTop:29,
        color:'black',
        marginBottom:15,
        fontWeight:'900',
    },
    time_text:{
        color:'rgba(1,1,1,0.5)',
        fontSize:12,
        marginLeft:12,
    },
    time_text_:{
        color:'rgb(0,0,0)',
        fontSize:13,
        marginLeft:10,
    },

    teach_name:{
        color:'rgb(0,0,0)',
        fontSize:12,
        fontWeight:'200',
    },
})